<?php
@header('Content-type: text/html;charset=UTF-8');
include '../../include/config.php';
require_once ('ly_check.php');
?>
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>交易实时详情</title>
        <style>
            * {
                padding: 0px;
                margin: 0px;
                color: #00bcd4;
            }
            html {
                width: 100%;
                height: 100%;
				background: url(../images/Background.jpg) no-repeat center / cover;
            }
            body {
				width: 100%;
                height: 100%;
            }
            .content {
                width: 80%;
                height: 80vh;
                margin: 10vh auto 0;
                border-top: 2px solid #60808d;
                background: rgba(28, 32, 41, 0.5);
                box-shadow: 5px 5px 20px 3px rgba(0, 0, 0, 0.35);
            }
            .cont_header {
                height: 40%;
                padding: 2%;
                position: relative;
            }
            .cont_header .max_data {
                display: inline-block;
                width: 55%;
                text-align: right;
                font-size: 80px;
                color: #ffc107;
				font-weight: bold;
            }
            .cont_header .money {
                width: 55%;
            }
            .cont_header .money span:nth-child(2) {
                display: inline-block;
                float: right;
            }
            .cont_header .hover {
                width: 23%;
                height: 100%;
                background: #27283a;
                box-shadow: 5px 6px 9px 0px rgba(0, 0, 0, 0.4);
                position: absolute;
                right: 5%;
                top: -5%;
            }
            .cont_header .hover span {
                display: inline-block;
                margin: 5% 0 0 5%;
                color: #9295a6;
            }
            .cont_header .hover span:nth-child(3) ,.cont_header .hover span:nth-child(7) {
                font-size: 25px;
            }
            .line_block {
                padding: 1% 2%;
                height: 10%;
                border-top: 2px solid #60808d;
                overflow: hidden;
            }
            .line_block_right {
                display: inline-block;
                float: right;
            }
            .cont_bottom {
                height: 50%;
                border-top: 2px solid rgba(255, 249, 249, 0.3);
                display: flex;
                overflow: hidden;
            }
            .cont_bottom > div {
                flex: 1;
                height: 100%;
                text-align: center;
                position: relative;
            }
            .cont_bottom > div:after {
                content: ' ';
                display: inline-block;
                position: absolute;
                top: 15%;
                right: 0px;
                width: 1px;
                height: 60%;
                background: rgba(158, 158, 158, 0.36);
            }
            .cont_bottom > div:nth-child(7):after {
                width: 0px;
                height: 0px;
            }
            .cont_bottom > div p {
                line-height: 300%;
            }
            body .cont_bottom > div.user p{
                color: #00bcd4;
            }
            .cont_bottom > div p:nth-child(2) {
                color: white;

            }
            .cont_bottom > div p:nth-child(3),p:nth-child(4) {
                color: #fff;
            }
            .yellow_money {
                color: #ffc107;
            }
            .cont_bottom > div > div{
                margin-top: 20px;
            }
            .cont_bottom > div > div > span{
                font-size:20px;
                color: white;
            }
            .btn {
                background: none repeat scroll 0 0 rgb(2, 114, 188);
                border: medium none;
                cursor: pointer;
                height: 40px;
                margin: 0px 20px 0 0;;
                width: 92px;
                color: #fff;
                font-family: "微软雅黑";
                font-size: 16px;
                border-radius: 5px;
            }
        </style>
        <script src="../../front/js/jquery.min.js"></script>
        <script>
            var year_sell, year_buy, day_sell, day_buy, yesterday_sell, yesterday_buy, month_sell, month_buy;
            $(function () {
                getRTData();
                $('#enter').bind("click", function () {
                    var docElm = document.documentElement;
                    if (docElm.requestFullscreen) {
                        docElm.requestFullscreen();
                    } else if (docElm.msRequestFullscreen) {
                        docElm.msRequestFullscreen();
                    } else if (docElm.mozRequestFullScreen) {
                        docElm.mozRequestFullScreen();
                    } else if (docElm.webkitRequestFullScreen) {
                        docElm.webkitRequestFullScreen();
                    }
                });
                $('#cancel').bind("click", function () {
                    var docElm = document.documentElement;
                    if (document.exitFullscreen) {
                        document.exitFullscreen();
                    } else if (document.msExitFullscreen) {
                        document.msExitFullscreen();
                    } else if (document.mozCancelFullScreen) {
                        document.mozCancelFullScreen();
                    } else if (document.webkitCancelFullScreen) {
                        document.webkitCancelFullScreen();
                    }
                });
            });
            function magic_number(id, value) {
                var num = $('#' + id);
                num.animate(
                        {count: value},
                        {
                            duration: 2000,
                            easing: "linear",
                            step: function () {
                                num.text(splitK(String(parseInt(this.count))));
                            }, complete: function ()
                            {
                                num.text(splitK(value));
                            }
                        }
                )
            }
            function splitK(num) {
                if (num == 0)
                {
                    return 0;
                }
                var decimal = String(num).split('.')[1] || '';
                var tempArr = [];
                var revNumArr = String(num).split('.')[0].split("").reverse();
                for (i in revNumArr) {
                    tempArr.push(revNumArr[i]);
                    if ((i + 1) % 3 === 0 && i != revNumArr.length - 1) {
                        tempArr.push(',');
                    }
                }
                var zs = tempArr.reverse().join('');
                return decimal ? zs + '.' + decimal : zs;
            }

            function getRTData()
            {
                //当年的买卖合计
                $.ajax({
                    url: 'reportData.php?type=YearData',
                    type: 'get',
                    datatype: 'json',
                    success: function (data) {
                        var obj = new Function("return" + data)();
                        year_sell = obj.sell;
                        year_buy = obj.buy;
                        if (parseInt(year_sell) + parseInt(year_buy) == 0)
                        {
                            magic_number("s13", 0);
                            magic_number("s14", 0);
                        } else {
                            year_sell_p = Math.round(parseInt(year_sell) / (parseInt(year_sell) + parseInt(year_buy)) * 100);
                            magic_number("s13", year_sell_p);
                            magic_number("s14", 100 - year_sell_p);
                        }

                        magic_number("s1", obj.sell);
                        magic_number("s2", obj.sell);
                        magic_number("s3", obj.sell);
                        magic_number("s4", obj.buy);
                    }
                });
                //上一天的买卖合计
                $.ajax({
                    url: 'reportData.php?type=YesterdayData',
                    type: 'get',
                    datatype: 'json',
                    success: function (data) {
                        var obj = new Function("return" + data)();
                        yesterday_sell = obj.sell;
                        yesterday_buy = obj.buy;
                        if (parseInt(yesterday_sell) + parseInt(yesterday_buy) == 0) {
                            magic_number("s17", 0);
                            magic_number("s18", 0);
                        } else {
                            yesterday_sell_p = Math.round(parseInt(yesterday_sell) / (parseInt(yesterday_sell) + parseInt(yesterday_buy)) * 100);
                            magic_number("s17", yesterday_sell_p);
                            magic_number("s18", 100 - yesterday_sell_p);
                        }

                        magic_number("s7", obj.sell);
                        magic_number("s10", obj.sell);
                        magic_number("s8", obj.buy);
                    }
                });
                //当天的买卖合计
                $.ajax({
                    url: 'reportData.php?type=TodaydayData',
                    type: 'get',
                    datatype: 'json',
                    success: function (data) {
                        var obj = new Function("return" + data)();
                        day_sell = obj.sell;
                        day_buy = obj.buy;
                        if (parseInt(day_sell) + parseInt(day_buy) == 0) {
                            magic_number("s15", 0);
                            magic_number("s16", 0);
                        } else {
                            day_sell_p = Math.round(parseInt(day_sell) / (parseInt(day_sell) + parseInt(day_buy)) * 100);
                            magic_number("s15", day_sell_p);
                            magic_number("s16", 100 - day_sell_p);
                        }

                        magic_number("s5", obj.sell);
                        magic_number("s9", obj.sell);
                        magic_number("s6", obj.buy);
                    }
                });
                //当月的买卖合计
                $.ajax({
                    url: 'reportData.php?type=MonthData',
                    type: 'get',
                    datatype: 'json',
                    success: function (data) {
                        var obj = new Function("return" + data)();
                        month_sell = obj.sell;
                        month_buy = obj.buy;
                        if (parseInt(month_sell) + parseInt(month_buy) == 0) {
                            magic_number("s25", 0);
                            magic_number("s26", 0);
                        } else {
                            month_sell_p = Math.round(parseInt(month_sell) / (parseInt(month_sell) + parseInt(month_buy)) * 100);
                            magic_number("s25", month_sell_p);
                            magic_number("s26", 100 - month_sell_p);
                        }

                        magic_number("s11", obj.sell);
                        magic_number("s12", obj.buy);
                    }
                });
                //当年的商品排行榜
                $.ajax({
                    url: 'reportData.php?type=YearTopData',
                    type: 'get',
                    datatype: 'json',
                    success: function (data) {
                        var obj = new Function("return" + data)();
                        $("#s19").text(obj.sell_top);
                        $("#s20").text(obj.buy_top);
                    }
                });
                //当天的商品排行榜
                $.ajax({
                    url: 'reportData.php?type=DayTopData',
                    type: 'get',
                    datatype: 'json',
                    success: function (data) {
                        debugger;
                        var obj = new Function("return" + data)();
                        $("#s21").text(obj.sell_top);
                        $("#s22").text(obj.buy_top);
                    }
                });
                //昨天的商品排行榜
                $.ajax({
                    url: 'reportData.php?type=YesterdayTopData',
                    type: 'get',
                    datatype: 'json',
                    success: function (data) {
                        var obj = new Function("return" + data)();
                        $("#s23").text(obj.sell_top);
                        $("#s24").text(obj.buy_top);
                    }
                });
                
            }
            setInterval('getRTData()', 8000);
        </script>
    </head>
    <body>
        <div class="content">
            <div class="cont_header">
                <p>今日上行数据（元）:<span id="s9" style="font-size:35px;color:white;"></span></p>
                <span class="max_data" id="s2"></span>
                <br>
                <div class="money">
                    <span>昨日上行数据（元）:<span id="s10" style="font-size:35px;color:white;"></span></span>
                    <span>本年上行数据（元）:<span id="s1" class="yellow_money"></span></span>
                </div>
                
                <div class="hover">
                    <span>本月上行数据（元）</span>
                    <br>
                    <span id="s11" style="font-size:35px;"></span>
                    <span style="margin:0;padding:0;">(占</span><span id="s25" style="margin:0;padding:0;">12</span>
                    <span style="margin:0;padding:0;">%)</span>
                    <br>
                    <span>本月下行数据（元）</span>
                    <br>
                    <span id="s12" style="font-size:35px;"></span>
                    <span style="margin:0;padding:0;">(占</span><span id="s26" style="margin:0;padding:0;">12</span>
                    <span style="margin:0;padding:0;">%)</span>
                    <br>
                    <br>
                    <span style="margin-top: 10px;">
                        <button class="btn" id="enter">全屏模式</button>
                        <button class="btn" id="cancel">退出全屏</button>
                    </span>
                    <br>
                </div>
            </div>

            <div class="cont_bottom">
                <div class="user">
                    <p>&nbsp;</p>
                    <p>实时数据</p>
                    <p>百分比</p>
                    <p>商品排行榜</p>
                </div>
                <div>
                    <p>本年上行数据</p>
                    <div><span id="s3"></span></div>
                    <div><span id="s13"></span><span>%</span></div>
                    <div><span id="s19"></span></div>
                </div>
                <div>
                    <p>本年下行数据</p>
                    <div><span id="s4"></span></div>
                    <div><span id="s14"></span><span>%</span></div>
                    <div><span id="s20"></span></div>
                </div>
                <div>
                    <p>今日上行数据</p>
                    <div><span id="s5"></span></div>
                    <div><span id="s15"></span><span>%</span></div>
                    <div><span id="s21"></span></div>
                </div>
                <div>
                    <p>今日下行数据</p>
                    <div><span id="s6"></span></div>
                    <div><span id="s16"></span><span>%</span></div>
                    <div><span id="s22"></span></div>
                </div>
                <div>
                    <p>昨日上行数据</p>
                    <div><span id="s7"></span></div>
                    <div><span id="s17"></span><span>%</span></div>
                    <div><span id="s23"></span></div>
                </div>
                <div>
                    <p>昨日下行数据</p>
                    <div><span id="s8"></span></div>
                    <div><span id="s18"></span><span>%</span></div>
                    <div><span id="s24"></span></div>
                </div>
            </div>
        </div>
    </body>
</html>